<!--
 * @Description: 邀请有礼 - 海报配置
 * @Author: liyujie
 * @Date: 2021/03/04
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/03/04
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <div>
                <div class="form-view">
                    <!--表单-->
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        label-position="right"
                        ref="ruleForm"
                        label-width="120px"
                        class="form-wrap"
                        @submit.native.prevent
                    >
                        <el-form-item
                            label="海报图片"
                            prop="background_img"
                        >
                            <el-upload
                                :show-file-list="false"
                                action="noAction"
                                class="upload-view"
                                :http-request="handleUpload"
                                accept="image/*"
                                drag
                            >
                                <img
                                    v-if="ruleForm.background_img"
                                    :src="ruleForm.background_img"
                                >
                                <i
                                    class="el-icon-upload"
                                    v-if="!ruleForm.background_img"/>
                                <div
                                    class="el-upload__text"
                                    v-if="!ruleForm.background_img">将文件拖到此处，或<em>点击上传</em></div>
                                <div
                                    class="el-upload__tip"
                                    slot="tip"
                                >
                                    格式支持jpg、png、jpeg；尺寸：574*912px，且不超过500kb，特别注意：如果有需要二维码的部分，请提前确定图片可用
                                </div>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </div>

                <!-- button -->
                <div class="footer">
                    <el-button
                        size="medium"
                        type="default"
                        @click="$emit('update')"
                    >
                        取消
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        @click="handleSubmit()"
                    >
                        保存
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {back} from '@/mixin/back';

export default {
    name: 'PolitePosterEdit',
    data() {
        return {
            ruleForm: {
                background_img: '',
            },
            rules: {
                background_img: [
                    {required: true, message: '请上传活动海报', trigger: 'change'}
                ],
            },
            authResult: {}
        };
    },
    mixins: [back],
    watch: {},
    components: {},
    mounted() {
        this.init();
    },
    methods: {
        /**
         * @description 页面初始化
         */
        init() {
            this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {title: '邀请有礼'}, {title: '海报配置'}]);
            this.authResult = this.$route.meta.authResult;
            this.getDetail();
        },

        /**
         * 获取
         */
        getDetail() {

            this.$post('/student/student_user_invite_award%5Cget_invite_share_config', {}, resp => {
                if (resp.code === 1) {
                    this.ruleForm.background_img = resp.data.background_img;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 提交
         */
        handleSubmit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {

                    let params = {...this.ruleForm};

                    this.$post('/student/student_user_invite_award%5Cset_invite_share_config', params, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                duration: 2000,
                                type: 'success'
                            });
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                }
            });
        },

        /**
         * 文件上传
         * @param e
         */
        handleUpload(e) {
            let file = new FormData();

            file.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: file,
                progress: e.onProgress,
                success: resp => {
                    if(resp.code === 1) {
                        this.ruleForm.background_img = resp.data.url;
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                }
            });
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;
        overflow-y: auto;

        .header {
            width: 100%;
            height: 68px;
            display: flex;
            align-items: center;
            white-space: nowrap;
            box-sizing: border-box;
            padding-left: 35px;
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
            font-weight: 500;
            position: relative;
            border-bottom: 1px rgba(233, 233, 233, 1) solid;
            flex-shrink: 0;

            &::before {
                content: '';
                background: rgba(24, 144, 255, 1);
                width: 3px;
                height: 20px;
                position: absolute;
                top: 23px;
                left: 25px;
            }
        }

        .form-view {
            background: #FBFBFB;
            border-radius: 2px;
            border: 1px solid #EEEEEE;
            margin: 24px;
            box-sizing: border-box;
            padding: 32px;

            .upload-view {
                /deep/ .el-upload {
                    margin-top: 12px;

                    .el-upload-dragger {
                        display: block;
                        width: 468px;
                        height: 170px;
                        border-radius: 4px;

                        .el-upload__text {
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            line-height: 14px;
                        }
                    }
                }
                .el-upload__tip {
                    margin-top: -10px;
                }
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        /*footer*/

        .footer {
            box-sizing: border-box;
            padding-left: 176px;
            margin-top: 8px;
            margin-bottom: 52px;

            .el-button {
                width: 120px;
                margin: 0 16px 12px;
            }
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0px 1px 0px 0px rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-textarea__inner {
        resize: none;
    }
}
</style>

